const path = require("path") //引入node内置模块path 处理文件路径
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    //入口,配置多个 写对象
    entry: {
        // 公共的配置写在前面
        commonCss:"./src/css/common/commoncss.js",
        dom:"./src/js/common/dom.js",
        utils:"./src/js/common/utils.js",
        advertising:"./src/js/advertising.js",
        login:"./src/js/login.js",
        home:"./src/js/home.js",
        register:"./src/js/register.js",
        mine:"./src/js/mine.js",
        course:"./src/js/course.js",
        introduce:"./src/js/introduce.js",
        person:"./src/js/person.js",
        player:"./src/js/player.js",
        motion:"./src/js/motion.js",
    },

    output: {
        //输出文件的路径,绝对路径
        path: path.resolve(__dirname, "dist"),//会拼成类似这样的路径-->\xxx\aa\dist
        filename: "js/[name]-[hash:5].js",
    },

    //加载器loader
    module: {
        rules: [
            {//匹配所有的css文件
                test: /\.css$/,
                use: [
                    //在head中创建一个style标签,把下面转的字符串放进来
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"  //css中查找静态资源(图片)的路径
                        },
                    },
                    //把css文件的内容转为字符串
                    "css-loader",
                    "postcss-loader"
                ]
            },

            {
                test: /\.less$/,
                use: [
                    //在head中创建一个style标签,把下面转的字符串放进来
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"  //css中查找静态资源(图片)的路径
                        },
                    },
                    //把css文件的内容转为字符串
                    "css-loader",
                    "less-loader",//将less文件编译成.css
                    "postcss-loader",
                ]
            },
            // 处理图片
            {
                test: /\.(png|jpeg|jpg|gif)$/,
                loader: "url-loader",
                options: {//配置项
                    //限制要处理的图片大小,如果小于10kb,就进行base64转码
                    //如果大于,就不转码,拷贝到输出目录
                    limit: 10 * 1024,
                    esModule: false,
                    name: "[hash:6].[ext]",
                    outputPath: 'imgs' // 输出路径
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader",
            },
            //处理字体图标
            {
                test: /\.eot|ttf|woff|woff2|svg/,
                loader: "file-loader",
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },
            {//把es6的代码转成es5的
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            },
        ]
    },

    //插件
    plugins: [
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),
        new OptimizeCssAssetsWebpackPlugin(),// 压缩css
        new HtmlWebpackPlugin({  //首页
            template: "./src/home.html",
            filename:"home.html", //输出文件的名字
            // 配置依赖的模块
            chunks:["home","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //广告
            template: "./src/advertising.html",
            filename:"advertising.html", //输出文件的名字
            // 配置依赖的模块
            chunks:["advertising","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //登录
            template: "./src/login.html",
            filename:"login.html", //输出文件的名字
            chunks:["login","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //注册页
            template: "./src/register.html",
            filename:"register.html", //输出文件的名字
            chunks:["register","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //我的页
            template: "./src/mine.html",
            filename:"mine.html", //输出文件的名字
            chunks:["mine","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //课程界面
            template: "./src/course.html",
            filename:"course.html", //输出文件的名字
            chunks:["course","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //课程介绍界面
            template: "./src/introduce.html",
            filename:"introduce.html", //输出文件的名字
            chunks:["introduce","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //个人信息
            template: "./src/person.html",
            filename:"person.html", //输出文件的名字
            chunks:["person","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //个人信息
            template: "./src/player.html",
            filename:"player.html", //输出文件的名字
            chunks:["player","commonCss","dom","utils"]
        }),
        new HtmlWebpackPlugin({  //运动数据
            template: "./src/motion.html",
            filename:"motion.html", //输出文件的名字
            chunks:["motion","commonCss","dom","utils"]
        }),
    ],
    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        port: 666,  // 端口
        open: true ,// 自动打开浏览器
        publicPath: '/',  // 默认dist就是服务器根目录 从根目录查找资源
        openPage: 'advertising.html', // 打开的页面
    },
    //模式
    mode: "development"
    // mode: "production",

}